import React,{useState,useEffect} from "react";
import { 
  Form, Input, Button,  
  Spin,message,Switch,
  Cascader
} from "antd";
import { cfyList } from "../../api/goods";
import { $http,request } from "../../utils/request";
import ImgUpload from "../../components/ImgUpload";
import ReactWEditor from 'wangeditor-for-react';
import RichEditor from "../../components/RichEdior";

// const options = [  //级联组件的配置参考
//   {
//     value: 'zhejiang',
//     label: 'Zhejiang',
//     children: [
//       {
//         value: 'hangzhou',
//         label: 'Hangzhou',
//         children: [
//           {
//             value: 'xihu',
//             label: 'West Lake',
//           },
//         ],
//       },
//     ],
//   }
// ];
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 10,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

const GoodsPublic = () => {
  const [form] = Form.useForm();
  let [loading,setLoading] = useState(false)
  let [options,setOptions] = useState([])

  useEffect(()=>{
    initCascador()

  },[])

  const initCascador = ()=>{ //初始化级联分类选择器
    cfyList().then(res=>{
      console.log(res);
      let {results} = res.data
      let arr = []
      results.forEach(item=>{
        let obj = {
          value:item.bid,
          label:item.bname,
          children:[
            {value:'list',label:'口味',children:[]},
            {value:'scene',label:'场景',children:[]},
          ]
        }
        item.list.forEach(itm=>{ //填充口味
          obj.children[0].children.push({value:itm.tid,label:itm.tname})
        })
        item.scene.forEach(itm=>{ //填充场景
          obj.children[1].children.push({value:itm.tid,label:itm.tname})
        })
        arr.push(obj)
      })
      setOptions(arr)
    })
  }

  const onFinish = (values) => { //表单提交
    console.log(values);
    // bannerAdd(values).then(res=>{
    //   console.log(res);
    // })
  };

  const onReset = () => { //重置表单
    form.resetFields();
  };

  const handleGoods = () =>{ //转存商品列表数据
    
    let url = '/api/0434b49d1ac28f9d?cityId=110&page=1&bid=1'
    $http.get(url).then(res=>{
      console.log(res);
      let {list} = res.data.data
      let batchObj = {"requests":[]}
      list.forEach(item=>{
        item.sname = item.sname ? item.sname : ''
        item.sid = item.sid ? item.sid : 20222106
        batchObj.requests.push({
          method:'POST',
          path:'/1.1/classes/CakeGoods',
          body:item
        })
      })
      request.post('/1.1/batch',batchObj) //批量转存
    })
  }

  return (
    <Spin spinning={loading}>
      <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
        <Form.Item
          name="name"
          label="商品名称"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="cfy"
          label="归属分类"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Cascader options={options} placeholder="请选择归属分类" />
        </Form.Item>
        {/* <Form.Item
          name="poster"
          label="商品封面"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <ImgUpload />
        </Form.Item> */}
        <Form.Item
          name="intro"
          label="商品详情"
          rules={[
            {
              required: true,
            },
          ]}
        >
          {/* <ReactWEditor/> */}
          <RichEditor/>
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            发布
          </Button>
          <Button htmlType="button" onClick={onReset}>
            重置
          </Button>
          <Button type="primary" ghost onClick={handleGoods}>
            转存
          </Button>
        </Form.Item>
      </Form>
    </Spin>
  );
};

export default GoodsPublic;
